<template>
    <el-row
        class="row"
        @mouseenter="isshow=true"
        @mouseleave="isshow=false"
    >
        <el-col class="left" :span="4"
            ><img class="img" :src="data.cover"
        /></el-col>
        <el-col :span="17">
            <div class="center">
                <div class="title">{{ data.contentName }}</div>
                <div class="time">
                    {{
                        data.weekTrainedCount
                            ? `已练习${data.weekTrainedCount}次${(
                                  data.weekTrainedDuration /
                                  1000 /
                                  60
                              ).toFixed(0)}`
                            : "未开始"
                    }}
                </div>
            </div>
        </el-col>
        <el-col class="right" :span="2">
            <button v-show="isshow" class="exbtn">开始练习</button>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const props=defineProps(['data'])
const isshow = ref(false);

</script>

<style lang="less" scoped>
.row {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    .left.el-col-4 {
        width: 169px;
        height: 101px;
        margin-right: 20px;
        border-radius: 4px;
        max-width: 169px;
        flex: 1;

        .img {
            width: 100%;
            height: 100%;
        }
    }
    .right {
        text-align: center;
        .exbtn {
            position: relative;
            top: 30px;
            cursor: pointer;
            width: 96px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            background: #f73687;
            border-radius: 4px;
            border: none;
        }
    }

    .center {
        .title {
            font-size: 16px;
            font-weight: 700;
            color: #111;
        }
        .time {
            margin-top: 25px;
            font-size: 14px;
            color: #7d8090;
        }
        // .author {
        // }
    }
}
</style>
